<template>
  <div id="count">
    <el-row type="flex" class="" justify="center">
      <el-col :span="23" class="line">
        <i class="el-icon-setting"></i>账号管理
      </el-col>
    </el-row>
    <div class="content" v-loading.fullscreen.lock="fullscreenLoading"
              element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">
       <blockquote class="layui-elem-quote">修改用户信息</blockquote>
       <el-form ref="form1" :rules="rules1"  :model="form1" label-width="80px" class="myform">
          <el-form-item label="邮箱" prop="account">
            <el-input v-model="form1.account"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="form1.mobile"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateInfo">确定</el-button>
            <el-button @click="resetForm('form1')">重置</el-button>
          </el-form-item>
        </el-form>
        <blockquote class="layui-elem-quote">修改密码</blockquote>
       <el-form ref="form2" :model="form2" :rules="rules2" label-width="80px" class="myform">
          <el-form-item label="原始密码" prop="oripassword">
            <el-input v-model="form2.oripassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="pass">
            <el-input v-model="form2.pass"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="form2.checkPass"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatePass">确定</el-button>
            <el-button @click="resetForm('form2')">取消</el-button>
          </el-form-item>
        </el-form>
     </div>
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker'
  export default {

    data() {
      var checkMobile = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else {
            var re = /^1\d{10}$/
            if (!re.test(value)) {
              callback(new Error('请输入正确的手机号'));
            } else {
                callback();
              }
          }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.form2.checkPass !== '') {
            this.$refs.form2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        fullscreenLoading:false,
        form1:{
          mobile:'',
          account:''
        },
        form2:{
          oripassword:'',
          passward:'',
          checkPass:''
        },
        rules2:{
          pass: [
            { validator:validatePass, trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          oripassword: [
              { required:true ,message:'请输入原始密码', trigger: 'blur' },
              
            ],
          checkPass: [
            { validator:validatePass2, trigger: 'blur' },
          ]
        },
        rules1:{
          mobile: [
            { validator: checkMobile, trigger: 'blur' },
            
          ],
          account: [
              { required:true ,message:'请输入正确邮箱', trigger: 'blur', type:"email"},
              
            ]
        }
      }
    },
    components: {
      VDistpicker
    },
    mounted(){
      this.fullscreenLoading=true;
      this.getInfo();
    },
    methods: {
      getInfo(){
        var that=this;
        this.axios({
          url:this.host+'/3v1t.smserver.cn/index.php/student/Modifysysinfo/getinfo',
          method:'post',
          headers:{
                "Content-type":"application/json"
              }

        }).then((res)=>{
          //console.log(res);
          that.fullscreenLoading=false;
          that.form1.account=res.data.data.account;
          that.form1.mobile=res.data.data.mobile;
        })
      },
      gotoDetail(mess){
        this.$router.push('/userHome/progressDetail')
      },
      logout(){
        var that=this;
        this.axios({
              url:this.host+'/3v1t.smserver.cn/index.php/index/login/signout',
              method:'post',
              headers:{
                "Content-type":"application/json"
              }
            }).then((res)=>{
              console.log(res);            
              sessionStorage.clear();
              that.$router.push("/");
            })
        },
      updatePass(){
        var that=this;
        this.$refs.form2.validate((vaild)=>{
          if(vaild){
            var message={
              oripassword:this.form2.oripassword,
              password:this.form2.pass
            }
            //console.log(message);
            this.fullscreenLoading=true;
            this.axios({
              url:this.host+'/3v1t.smserver.cn/index.php/index/student.Modifysysinfo/modifypassword',
              method:'post',
              data:JSON.stringify(message),
              headers:{
                  "Content-type":"application/json"
              }
            }).then((res)=>{
              console.log(res);
              that.fullscreenLoading=false;
              if(res.data.code==1){
                that.$message({
                    message:'密码修改成功',
                    type:'success'
                })
                setTimeout(()=>{that.logout()},1500)
              }else{
                that.$message({
                  message:'原始密码错误',
                  type:'warning'
                })
              }
            })
          }else{
            console.log('检查格式！')
            return false;
          }
        })
      },
      updateInfo(){
        var that=this;
        this.$refs.form1.validate((vaild)=>{
          if(vaild){
            var message={
              account:this.form1.account,
              mobile:this.form1.mobile
            }
            //console.log(message);
            this.fullscreenLoading=true;
            this.axios({
              url:this.host+'/3v1t.smserver.cn/index.php/index/student.Modifysysinfo/modifyinfo',
              method:'post',
              data:JSON.stringify(message),
              headers:{
                  "Content-type":"application/json"
              }
            }).then((res)=>{
              //console.log(res);
              that.fullscreenLoading=false;
              if(res.data.code==1){
                that.$message({
                    message:'信息修改成功',
                    type:'success'
                })
                setTimeout(()=>{
                  location.reload();
                },1500)
              }else{
                that.$message({
                  message:'修改失败',
                  type:'warning'
                })
              }
            })
          }else{
            console.log('检查格式！')
            return false;
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  #count {
    //width:100%;
    //line-height:100%;
    padding: 10px;
    .line {
      border-bottom: 1px solid #ccc;
      text-align: left;
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
    }
    .content {
      padding: 20px;
      text-align: left;
    }
    .myform{
      margin-left:20px;
      width:300px;
    }
    .layui-elem-quote{
      border-left: 5px solid rgba(64, 168, 255, 0.8);
    }
    
  }

</style>
